import { h, fragment } from '@knno/dom/jsx';
import { bar } from './index.css';
import { Datebox } from '@knno/ui/jsx/datebox';
import SVGDate from '@material-design-icons/svg/filled/calendar_today.svg';

export function ShowDatebox() {
	return (
		<>
			<h2>日期时间选择框</h2>
			<div class={bar}>
				<Datebox mode="dy" value="2023-12-21" />
				<Datebox mode="dm" value="2023-12-21" />
				<Datebox mode="dd" value="2023-12-21" prefixIcon={SVGDate} />
				<hr></hr>
				<Datebox range mode="dy" value="2023-12-21" />
				<Datebox range mode="dm" value="2023-12-21" />
				<Datebox range mode="dd" value={['2023-12-10', '2023-12-20']} clearable />
				<hr></hr>
				<Datebox range mode="ts" value="2023-12-21" />
				<Datebox range mode="tm" value="2023-12-21" />
				<hr></hr>
				<Datebox mode="dd+tm" value="2023-12-21" />
				<Datebox mode="dd+ts" value="2023-12-21" />
			</div>
		</>
	);
}
